<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input表单元素</title>
</head>
<body>
    <form action="xxx.php" method="get">
        <!--
             text  文本框  用户可以在里面输入任何文字
             password  密码框  用户看不见输入的密码
             maxlength  正整数  规定输入字段中的字符的最大长度
         -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        密码：<input type="password" name="psw"> <br>

        <!-- 
            radio 单选按钮  可以实现多选一
            name  是表单元素的名字  这里性别单选按钮必须有相同的名字name 才可以实现多选一
            checkbox  复选框  可以实现多选
            单选框和复选框可以设置 checked 属性，当页面打开的时候就可以默认选中这个按钮
         -->
         性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
         爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭" checked="checked"> 睡觉 <input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br>

        <!-- 
            1.name和value是每个表单元素都要有的属性值，主要给后台人员使用
            2.name表单元素的名字，要求单选按钮和复选按钮要有相同的name值
         -->

<!-- 
    点击了提交按钮，可以把表单域 form 里面的表单元素里面的值提交给后台服务器
 -->
         <input type="submit" value="免费注册">
<!-- 
    重置按钮可以还原表单元素初始的默认状态
 -->
         <input type="reset"  value="重置"> <br>

         <!-- 普通按钮 button   后期结合 js 搭配使用-->
         <input type="button" value="获取短信验证码"> <br>

         <!-- 文件域  使用场景  上传文件使用的 -->
         上传头像：<input type="file"> <br>
    </form>
</body>
</html>